<template>
  <div
    class="container"
    v-infinite-scroll="load"
    :infinite-scroll-immediate="false"
  >
    <div class="head">
      <el-image
        style="width: 300px; height: 300px; border-radius: 50%"
        :src="baseUrl + userInfo.avatar"
      />
      <div class="right">
        <span class="title">{{ userInfo.name }}</span>
        <div class="info">
          <span>昵称：{{ userInfo.nickname }}</span>
          <span>{{ sexFilter(userInfo.sex) }}</span>
        </div>
        <div class="types">
          <div
            :class="[model == 1 ? 'sel' : '', 'item']"
            @click="changeModel(1)"
          >
            <span>单曲</span>
            <span>100</span>
          </div>
          <div
            :class="[model == 2 ? 'sel' : '', 'item']"
            @click="changeModel(2)"
          >
            <span>专辑</span>
            <span>100</span>
          </div>
          <div
            :class="[model == 3 ? 'sel' : '', 'item']"
            @click="changeModel(3)"
          >
            <span>视频</span>
            <span>100</span>
          </div>
        </div>
        <div class="btns">
          <el-button
            @click="follow"
            size="large"
            type="primary"
            :icon="Plus"
            plain
            >{{ isFollow ? "取消关注" : "关注" }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="music_list" v-show="model == 1">
      <span>单曲</span>
      <el-table
        :data="musicList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" align="center" width="60" />
        <el-table-column width="60" align="center">
          <template #default="scope">
            <i
              @click="play(scope.row, scope.$index)"
              class="iconfont icon-bofang"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="歌曲" />
        <el-table-column label="歌手" width="300">
          <template #default="scope">
            <span>{{ scope.row.user?.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="200">
          <template #default="scope">
            <span>{{ timeFilter(scope.row.duration) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="album_list" v-show="model == 2">
      <span>专辑</span>
      <div class="list">
        <div
          @click="getAlbumInfo(item)"
          class="item"
          @mouseenter="isFocus = index"
          @mouseleave="isFocus = null"
          v-for="(item, index) in albumList"
          :key="index"
        >
          <el-image :src="baseUrl + item.image" />
          <div class="mask" v-if="isFocus == index">
            <i
              :class="[
                isFocus == index ? 'zoomIn' : '',
                'iconfont',
                'icon-bofang',
              ]"
            ></i>
          </div>
          <span>{{ item.title }}</span>
          <span>{{ item.create_time }}</span>
        </div>
      </div>
    </div>
    <div class="video_list" v-show="model == 3">
      <span>视频</span>
      <div class="list">
        <div
          @click="playVideo(item)"
          class="item"
          @mouseenter="isFocus = index"
          @mouseleave="isFocus = null"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <el-image :src="baseUrl + item.image" />
          <div class="mask" v-if="isFocus == index">
            <i
              :class="[
                isFocus == index ? 'zoomIn' : '',
                'iconfont',
                'icon-bofang',
              ]"
            ></i>
          </div>
          <span>{{ item.title }}</span>
          <div class="play">
            <el-icon><VideoCamera /></el-icon>
            <span>{{ item.views }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PersistentStore } from "@/stores";
import { Plus } from "@element-plus/icons-vue";
import {
  userInfo2,
  musicIndex,
  albumIndex,
  albumInfo,
  videoIndex,
  followAdd,
  followDel,
  followIsFollow,
} from "@/http/api";

const route = useRoute();
const router = useRouter();
const userInfo = ref({});
const baseUrl = import.meta.env.VITE_API_URL;
const persistentStore = PersistentStore();

const page = ref(1);
const more = ref(true);
const isFollow = ref(false);

const model = ref(1);

const musicList = ref([]);
const albumList = ref([]);
const videoList = ref([]);

const isFocus = ref(null);

onMounted(() => {
  getIsFollow();
});

const getIsFollow = async () => {
  const { data } = await followIsFollow({
    other_id: route.query.id,
  });
  isFollow.value = data.is_follow;
};

const follow = async () => {
  if (isFollow.value) {
    const { code, data } = await followDel({
      other_id: route.query.id,
    });
    if (code == 200) {
      isFollow.value = false;
    }
  } else {
    const { code,data } = await followAdd({
      other_id: route.query.id,
    });
    if (code == 200) {
      isFollow.value = true;
    }
  }
};

const getAlbumInfo = async (e) => {
  const { data } = await albumInfo({
    id: e.id,
  });
};

const getUserInfo = async () => {
  const { data } = await userInfo2({
    id: route.query.id,
  });
  userInfo.value = data.user;
};

const getVideoList = async () => {
  const { data } = await videoIndex({
    page: page.value,
    limit: 10,
    user_id: route.query.id,
  });
  data.video.data.length
    ? videoList.value.push(...data.video.data)
    : (more.value = false);
};

const sexFilter = (e) => {
  const info = {
    0: "女",
    1: "男",
    2: "组合",
  };
  return info[e];
};

const getAlbum = async () => {
  const { data } = await albumIndex({
    page: page.value,
    limit: 12,
    user_id: route.query.id,
  });
  data.album.data.length
    ? albumList.value.push(...data.album.data)
    : (more.value = false);
};

const getMusic = async () => {
  const { data } = await musicIndex({
    user_id: route.query.id,
    page: page.value,
    limit: 20,
  });
  data.music.data.length
    ? musicList.value.push(...data.music.data)
    : (more.value = false);
};

const playVideo = (e) => {
  persistentStore.setVideoId(e.id);
  const url = router.resolve("/play_video");
  window.open(url.href, url.href).postMessage(e.id);
};

const changeModel = (e) => {
  model.value = e;
  page.value = 1;
  more.value = true;
  if (e == 1) {
    musicList.value = [];
    getMusic();
  } else if (e == 2) {
    albumList.value = [];
    getAlbum();
  } else if (e == 3) {
    getVideoList();
  }
};

const tableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 == 0) {
    return "primary_row";
  }
  return "";
};

const play = (e, i) => {
  const url = router.resolve("/play_music");
  const arr = { id: "", index: 0, list: [e] };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};

const timeFilter = (e) => {
  let timeFormat = "00:00";
  if (e) {
    let minutes = Math.floor(e / 60);
    let second = e % 60;
    timeFormat =
      minutes.toString().padStart(2, "0") +
      ":" +
      second.toString().padStart(2, "0");
  }
  return timeFormat;
};

const load = () => {
  if (more.value) {
    page.value++;
    if (model.value == 1) {
      getMusic();
    } else if (model.value == 2) {
      getAlbum();
    }
    if (model.value == 3) {
      getVideoList();
    }
  }
};

watch(
  () => route.query,
  (newValue, oldValue) => {
    if (route.path != "/user") return;
    page.value = 1;
    more.value = true;
    musicList.value = [];
    model.value = 1;
    getMusic();
    getUserInfo();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
